<!--  -->
<template>
  <div class="search-set-u">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @closed="closed" :close-on-click-modal="false">
      <el-form :model="searchData" v-loading="loading" ref="pageForm" @submit.native.prevent>
        <el-form-item label="检索是否包含内容部分：">
          <el-radio v-model="searchData.searchContent" :label="2">不包含</el-radio>
          <el-radio v-model="searchData.searchContent" :label="3">包含</el-radio>
        </el-form-item>
        <el-form-item label="站内搜索" label-width="120px">
          <el-input v-model="searchData.text.siteSearch" autocomplete="off" size="medium" maxlength="200" style="width:80%;"
            placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="搜索中心" label-width="120px">
          <el-input v-model="searchData.text.searchCenter" autocomplete="off" size="medium" maxlength="200" style="width:80%;"
            placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="搜索内容" label-width="120px">
          <el-input v-model="searchData.text.searchContent" autocomplete="off" size="medium" maxlength="200" style="width:80%;"
            placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="没有搜索到结果" label-width="120px">
          <el-input v-model="searchData.text.noDataSearch" autocomplete="off" size="medium" maxlength="200" style="width:80%;"
            placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="请输入搜索内容" label-width="120px">
          <el-input v-model="searchData.text.noSearch" autocomplete="off" size="medium" maxlength="200" style="width:80%;"
            placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="点击搜索" label-width="120px">
          <el-input v-model="searchData.text.searchButton" autocomplete="off" size="medium" maxlength="200" style="width:80%;"
            placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-divider content-position="left" class="divider-u">输入为空弹窗提醒设置</el-divider>
        <el-form-item label="信息" label-width="120px">
          <el-input v-model="searchData.text.alertTitle" autocomplete="off" size="medium" maxlength="200" style="width:80%;"
            placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="确定" label-width="120px">
          <el-input v-model="searchData.text.alertBtn" autocomplete="off" size="medium" maxlength="50" style="width:80%;"
            placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="提示内容" label-width="120px">
          <el-input v-model="searchData.text.emptyMsg" autocomplete="off" size="medium" maxlength="300" style="width:80%;"
            placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closed" size="small">取 消</el-button>
        <el-button type="primary" @click="onSubmit()" :disabled="loading" size="small">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    propsOnSubmit: {
      type: Function
    }
  },
  created () {

  },
  data () {
    return {
      dialogFormVisible: false,
      title: '搜索页面设置',
      loading: true,
      searchData: {
        searchContent: null,
        text: {}
      }
    }
  },
  computed: {
  },
  watch: {
  },
  methods: {
    onSubmit () {
      if (this.loading) {
        return
      }
      this.loading = true
      let searchPageConfigString = JSON.stringify(this.searchData)
      // 请求写入数据库
      this.$post('/site/update-search-page-config', {searchPageConfigString: searchPageConfigString}).then(response => {
        this.loading = false
        if (response) {
          this.searchData = response
          this.closed()
        }
      })
    },
    show () {
      // 打开窗口
      this.dialogFormVisible = true
      this.loading = true
      // 获取页面数据
      this.$post('/site/search-page-config').then(response => {
        if (response) {
          this.searchData = response
          this.loading = false
        }
      }, (error) => {
        console.error(error)
        this.loading = false
      })
    },
    closed () {
      this.dialogFormVisible = false
      this.searchData = {
        searchContent: null,
        text: {}
      }
    }
  }
}
</script>
<style scoped lang="scss">
.divider-u /deep/ .el-divider__text{
  color:#999;
}
.search-set-u /deep/ .el-form-item{
  margin-bottom: 10px;
}
</style>
